<template>
  <hr>
  <h1>{{person}}</h1>
  <h1>persions:{{ persions }}</h1>
  <h1>姓名:{{ person.name }}</h1>
  <h1>年龄:{{ person.age }}</h1>
  <h1>薪资:{{ person.job.job1 }}K</h1>
  <button @click="name+='~'">修改姓名</button>
 <button @click="age++">修改年龄</button>
  <button @click="job1 ++">修改薪资</button> 

</template>
<script setup lang="ts">
// 总结:
// toRef 创建一个新的ref对象，他的value指向对象的某个属性
// 将响应式的某个对象属性单独给外部使用
// toRef和toRefs功能相似，toRefs支持处理多个refs对象

// 使用：
// toRef(对象，'属性') 将对象的某个属性变成响应式 只要是对象结构就可以如：const job1=toRef(person.job,'job1')
// toRefs(对象) 将对象的最外层属性变成响应式
     
import {reactive,toRef ,toRefs} from 'vue';
 let person=reactive({
  name:'zs',
  age:12,
  job:{
    job1:14
  }
 })
 const name=toRef(person,'name')
 const age=toRef(person,'age')
 const job1=toRef(person.job,'job1')
 const persions=toRefs(person)

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
